<template>
  <el-dialog title="添加进度" :visible.sync="show" :before-close="handleClose" center width="560px">
    <div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="案件编号">
          <span>{{caseId}}</span>
        </el-form-item>
        <el-form-item label="支付费用">
          <el-input placeholder="选填" v-model="form.money">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="发生时间" class='tip'>
          <el-date-picker
            v-model="form.createTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="进度描述" class='tip'>
          <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="添加图片">
          <div class="u-upload">
            <div v-for="(item, index) in imgList" :key="index" class='u-upload-img-item'>
                <img :src="item" alt="" />
                <div class='u-upload-mark'>
                    <i @click="deleteImg(item)" class='el-icon-error u-upload-deleted'></i>
                </div>
            </div>
            <input
              type="file"
              @change="upfile"
              ref="addFile"
              name="file"
              id="file"
              accept="image/png, image/jpeg, image/gif, image/jpg"
              class="u-upload-file"
            >
            <label for="file" class="btn btn-success">
              <i class="el-icon-plus"></i>
            </label>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "AddCaseProgress",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    caseId: {
      default: ''
    }
  },
  data() {
    return {
      form: {
        money: '',
        createTime: '',
        content: '',
      },
      imgList: []
    };
  },
  created() {
    console.log("show:::", this.show);
  },
  methods: {
    init() {
      this.form = {
        money: '',
        createTime: '',
        content: '',
      };
      this.imgList = [];
    },

    // 删除图片
    deleteImg(imgUrl) {
        this.imgList = this.imgList.filter(item => item != imgUrl);
    },

    // 添加进度
    addProgress() {
        this.$store.dispatch('ADD_CASE_PROGRESS', {
            caseId: this.caseId,
            content: this.form.content,
            createTime: this._utils.format(this.form.createTime, 'yyyy-mm-dd'),
            money: this.form.money,
            picUrl: this.imgList.join('|')
        }).then(res => {
            if(res.data.retCode == 0) {
                this.$message.success('添加成功！');
                this.handleClose();
            } else {
                res.data.errorMsg && this.$message.warning(res.data.errorMsg);
            }
        })
    },

    // 确定按钮点击事件
    onSubmit() {
        if(this._utils.isEmpty(this.form.createTime)) {
            this.$message.warning('请选择发生时间！');
            return;
        }
        if(this._utils.isEmpty(this.form.content)) {
            this.$message.warning('请填写进度描述！');
            return;
        }
        this.addProgress();
    },

    // 上传图片
    upfile(e) {
      const files = e.target.files;
      console.log("files:::", files);
      console.log("files[0]:::", files[0]);
      const form = new FormData();
      form.append("file", files[0]);
      form.append("dir", "progress");
      form.append("type", "1");
   
      this.$store.dispatch("UPLOAD_FILE", form).then(res => {
        console.log("res::::up:::", res);
        if(res.data.retCode == 0) {
          this.$message.success('上传成功！');
          this.imgList.push(res.data.data);
          e.target.value = '';
        //   this.iconUrl = res.data.data;
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
          e.target.value = '';
        }
      });
    },

    // dialog关闭前处理
    handleClose() {
      this.init();
      this.$emit("close");
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.tip >>> .el-form-item__label:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
}
</style>
